<template>
    <div class="side">
        <el-form :model="form" status-icon ref="ruleForm" class="demo-ruleForm">
            <el-form-item label="缴费人员">
                <el-input v-model="form.username" autocomplete="off" placeholder="请输入缴费人员"></el-input>
            </el-form-item>
            <el-form-item label="缴费名称">
                <el-input v-model="form.payname" autocomplete="off" placeholder="请输入缴费项目/名称"></el-input>
            </el-form-item>
            <el-form-item label="支付类型">
                <el-select v-model="form.costtype" placeholder="请选择支付类型" style="width: 100%;">
                    <el-option label="支付宝支付" :value="1"></el-option>
                    <el-option label="微信支付" :value="2"></el-option>
                    <el-option label="银联支付" :value="3"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="支付状态">
                <el-select v-model="form.coststatus" placeholder="请选择支付状态" style="width: 100%;">
                    <el-option label="已支付" :value="1"></el-option>
                    <el-option label="未支付" :value="2"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="支付状态">
                <el-date-picker v-model="fundTimeArray" type="datetimerange" range-separator="至" start-placeholder="开始日期"
                    end-placeholder="结束日期" style="width: 100%;">
                </el-date-picker>
            </el-form-item>
            <el-form-item label="缴费金额">
                <el-input v-model="form.paymoney" autocomplete="off" placeholder="请输入缴费金额"></el-input>
            </el-form-item>
            <el-form-item label="缴费优先级" v-if="!textButton">
                <el-input v-model="form.paylevel" autocomplete="off" placeholder="请输入缴费优先级"></el-input>
            </el-form-item>
            <el-form-item style="text-align: center;">
                <el-button type="text" @click="handleMore">
                    <i :class="textButton ? 'el-icon-arrow-down' : 'el-icon-arrow-up'">{{ textButton1 }}</i>
                </el-button>
            </el-form-item>
            <el-form-item class="footer">
                <el-button type="info" @click="handleReset">重置</el-button>
                <el-button type="primary" @click="handleFind">立即查询</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>
<script>
import { formats } from "@/assets/js/formatDate.js"
export default {
    watch: {
        //监听日期时间范围选择器 发生改变
        fundTimeArray() {
            let formatTimeArray = [];
            this.fundTimeArray.forEach(item => {
                formatTimeArray.push(formats.formatDate(item));
                this.form.startDate = formatTimeArray[0];
                this.form.endDate = formatTimeArray[1];
            })
        }
    },
    data() {
        return {
            fundTimeArray: [],
            textButton: true,
            textButton1: '更多',
            form: {}
        }
    },
    methods: {
        handleMore() {
            this.textButton = !this.textButton
            this.textButton1 = this.textButton ? '更多' : '收起'
        },
        handleReset() {
            this.form = {}
        },
        handleFind() {
            this.$emit('handleAside', this.form)
        }
    }
}
</script>
<style lang="scss" scoped>
.side {
    padding: 20px;

    .footer {
        ::v-deep .el-form-item__content {
            display: flex;

            .el-button {
                flex: 1;
            }
        }
    }
}
</style>